import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'node:path'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// import vueDevTools from 'vite-plugin-vue-devtools'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import svgLoader from 'vite-svg-loader'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import SvgComponent from 'unplugin-svg-component/vite'
import {
  createStyleImportPlugin,
  ElementPlusResolve
} from 'vite-plugin-style-import'
import { viteMockServe } from 'vite-plugin-mock'

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  const { VITE_PUBLIC_PATH, VITE_BASE_URL, VITE_SERVE } = loadEnv(
    mode,
    process.cwd(),
    ''
  ) as ImportMetaEnv
  return {
    plugins: [
      vue(),
      // vueDevTools(),
      vueSetupExtend(), // setup script属性扩展
      // 支持将 SVG 文件导入为 Vue 组件
      svgLoader({
        defaultImport: 'url',
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  // @see https://github.com/svg/svgo/issues/1128
                  removeViewBox: false
                }
              }
            }
          ]
        }
      }),
      // 自动按需导入 API
      AutoImport({
        imports: ['vue', 'vue-router', 'pinia'],
        dts: 'src/types/auto/auto-imports.d.ts',
        resolvers: [ElementPlusResolver()]
      }),
      // 自动按需导入组件
      Components({
        dts: 'src/types/auto/components.d.ts',
        resolvers: [ElementPlusResolver()]
      }),
      // 自动生成 SvgIcon 组件和 SVG 雪碧图
      SvgComponent({
        iconDir: [resolve(__dirname, 'src/assets/icons')],
        preserveColor: resolve(__dirname, 'src/assets/icons/preserve-color'),
        dts: true,
        dtsDir: resolve(__dirname, 'src/types/auto')
      }),
      // 自动引入el-message el-loading样式
      createStyleImportPlugin({
        resolves: [ElementPlusResolve()],
        libs: [
          {
            libraryName: 'element-plus',
            esModule: true,
            resolveStyle: (name) => {
              return `element-plus/theme-chalk/${name}.css`
            }
          }
        ]
      }),
      // mock模拟接口
      viteMockServe({
        mockPath: 'mock',
        enable: true
      })
    ],
    // 开发或打包构建时用到的公共基础路径
    base: VITE_PUBLIC_PATH,
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    // 开发环境服务器配置
    server: {
      // 是否监听所有地址
      host: true,
      // 端口号
      port: 3333,
      // 端口被占用时，是否直接退出
      strictPort: false,
      // 是否自动打开浏览器
      open: true,
      // 反向代理
      proxy: {
        [VITE_BASE_URL]: {
          target: VITE_SERVE,
          // 是否为 WebSocket
          ws: false,
          // 是否允许跨域
          changeOrigin: true

          // rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
      // 是否允许跨域
      cors: true,
      // 预热常用文件，提高初始页面加载速度
      warmup: {
        clientFiles: [
          './src/layouts/**/*.*',
          './src/pinia/**/*.*',
          './src/router/**/*.*'
        ]
      }
    },
    // 混淆器
    esbuild:
      mode === 'development'
        ? undefined
        : {
            // 打包构建时移除 console.log
            pure: ['console.log'],
            // 打包构建时移除 debugger
            drop: ['debugger'],
            // 打包构建时移除所有注释
            legalComments: 'none'
          }
  }
})
